<template>
	<div>
		<div class="flex">
			<div class="lumpBox">
				<div class="Lbox-title"><h2>工作日志</h2></div>
				<div class="Lbox-content">
					<div class="comment">
						<div class="com">
							<div class="content" v-for="(comment, idx) in comments" :key="`comment_${idx}`">
								<div class="cont">
									{{ comment.user }} {{ comment.date }}日志
									<br />
									<span>{{ comment.content }}</span>
									<el-button class="remark" @click="ShowAddComment(idx)" plain size="small" type="primary">添加评论</el-button>
								</div>
								<div class="discuss" v-for="(discuss, idx_) in comment.discuss" :key="`comment_${idx_}`">
									{{ discuss.user }} {{ discuss.date }} 评论日志
									<br />
									<span>{{ discuss.content }}</span>
								</div>
							</div>
						</div>
						<div class="write" v-if="IfShowEdit">
							<el-input placeholder="请输入评论" v-model="comment" clearable></el-input>
							<el-button @click="AddComment" class="remark" plain size="small" type="primary">评论</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="lumpBox">
				<div class="Lbox-title"><h2>操作日志</h2></div>
				<div class="Lbox-content">
					<div class="log table">
						<div v-for="(item,idx) in log" :key="`log_${idx}`">
							<div>
								<el-card class="box-card">
									<div slot="header" class="clearfix">
										<span style="color: red;">{{ item.log_content }}</span>
									</div>
									<div v-if="item.log_type==132">
										<span style="color: black;">
											<p>编辑原因：{{ item.reason }}</p>
										</span>
										<el-table :data="item.info" border style="width: 100%">
											<el-table-column v-if="item.info[0].app_direction" prop="app_direction" label="应用方向"></el-table-column>
											<el-table-column v-if="item.info[0].apply_code" prop="apply_code" label="申请编号"></el-table-column>
											<el-table-column v-if="item.info[0].apply_status" prop="apply_status" label="申请状态"></el-table-column>
											<el-table-column v-if="item.info[0].cus_name" prop="cus_name" label="客户名称"></el-table-column>
											<el-table-column v-if="item.info[0].expect_create_time" prop="expect_create_time" label="期望立项日期"></el-table-column>
											<el-table-column v-if="item.info[0].expect_dev_end_time" prop="expect_dev_end_time" label="期望样机交期"></el-table-column>
											<el-table-column v-if="item.info[0].expect_time" prop="expect_time" label="预计结项日期"></el-table-column>
											<el-table-column v-if="item.info[0].potential" prop="potential" label="未来三个月的业绩(万元)"></el-table-column>
											<el-table-column v-if="item.info[0].project_cate" prop="project_cate" label="项目分类"></el-table-column>
											<el-table-column v-if="item.info[0].project_desc" prop="project_desc" label="项目描述"></el-table-column>
											<el-table-column v-if="item.info[0].project_name" prop="project_name" label="项目名称"></el-table-column>
											<el-table-column v-if="item.info[0].project_type" prop="project_type" label="项目类型"></el-table-column>
											<el-table-column v-if="item.info[0].remark" prop="remark" label="备注"></el-table-column>
											<el-table-column v-if="item.info[0].staff_name" prop="staff_name" label="申请人姓名"></el-table-column>
										</el-table>
									</div>
									<div v-if="item.log_type==143">
										<span style="color: black;">
											<p>延期驳回原因：{{ item.reason }}</p>
										</span>
									</div>
									<div v-if="item.log_type==146">
										<span style="color: black;">
											<p>变更驳回原因：{{ item.reason }}</p>
										</span>
									</div>
									<div v-if="item.log_type==134">
										<span style="color: black;">
											<p>样机驳回原因：{{ item.reason }}</p>
										</span>
									</div>
									<div v-if="item.log_type==148">
										<span style="color: black;">
											<p>项目暂停原因：{{ item.reason }}</p>
										</span>
									</div>
									<div v-if="item.log_type==156">
										<span style="color: black;">
											<p>人员变更原因：{{ item.reason }}</p>
										</span>
									</div>
									<div v-if="item.log_type==11">
										<el-table :data="item.info" border style="width: 100%">
											<el-table-column prop="dev_manage" label="负责人"></el-table-column>
											<el-table-column prop="staffs" label="参与人"></el-table-column>
										</el-table>
									</div>
									<div v-if="item.log_type==159">
										<span style="color: black;">
											<p>项目负责人变更原因：{{ item.reason }}</p>
										</span>
										<el-table :data="item.info" border style="width: 100%">
											<el-table-column prop="staff_name" label="负责人"></el-table-column>
										</el-table>
									</div>
								</el-card>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="lumpBox">
				<div class="Lbox-title"><h2>问题</h2><el-button @click="ShowMessage(0)" class="remark" plain size="small" type="primary">提问题</el-button></div>
				<div class="Lbox-content">
					<div class="message">
						<div @click="ShowMessage(1, idx)" v-for="(message,idx) in messages" :key="idx">
							<span>
								{{ message.user }} 于 {{ message.date }} 发布 {{ message.title }}
							</span>
						</div>
					</div>
				</div>
			</div>
			<messageContent @cancel="Getcancel" @confirm="Getconfirm" v-if="IfShowMes" ref="messageContent"></messageContent>
		</div>
	</div>
</template>

<script>
import messageContent from './popup/message.vue'
export default {
	name: 'journal',
	data() {
		return {
			IfShowMes: false,
			comment: '',
			index: null,
			IfShowEdit: false,
			comments: [
				{
					user: '刘Sir',
					date: '2021-05-23',
					content: 'hahaha',
					discuss: [
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				}
			],
			log: [
				{
					"title": "广告屏平台建立",
					"log_type": "131",
					"log_content": "项目管理 于 2021-01-12 18:46 审核通过了立项申请",
					"info": [
						{
							"project_cate": "内部",
							"project_type": "云平台",
							"project_name": "广告屏平台建立",
							"project_desc": "1。服务器接口；\n2.服务器后台。\n3.服务器管理",
							"app_direction": "广告屏",
							"cus_name": "",
							"expect_time": "2021-01-31 23:59",
							"expect_dev_end_time": "2021-01-22 23:59",
							"staff_name": "苏云龙",
							"remark": "增加说明",
							"potential": "100W",
							"dev_deptid": "9",
							"project_code": "PJ210103",
							"project_status": 10
						}
					],
					"create_time": "2021-01-12 18:46:52",
					"reason": "",
					"fields": {
						"id": "",
						"apply_id": "立项申请ID",
						"project_code": "申请编号",
						"project_cate": "项目分类。1:内部;2:外部",
						"project_type": "项目类型。1:云平台;2:软件;3:硬件;4:PC软件",
						"project_name": "项目名称",
						"project_desc": "项目描述",
						"app_direction": "应用方向",
						"project_status": "项目状态。1:待分配；2：进行中；3：研发完成，待结项；4：已完成",
						"cus_id": "客户id",
						"cus_name": "客户名称",
						"expect_time": "预计结项日期",
						"staff_id": "申请人ID",
						"staff_name": "申请人姓名",
						"deptid": "申请人部门",
						"remark": "备注",
						"potential": "业绩潜力",
						"dev_manage_id": "研发负责人",
						"dev_deptid": "负责部门",
						"overdue_status": "超期状态。1：正常；2：超期（小于7天）；3：严重超期（大于等于7天）",
						"dev_end_time": "研发完成时间",
						"expect_dev_end_time": "期望研发完成日期",
						"check_id": "验收人id",
						"check_name": "验收人",
						"check_time": "验收时间",
						"is_cancel": "是否取消",
						"is_del": "是否删除",
						"create_time": "立项时间",
						"sales_team_leader_id": "销售组长id",
						"sales_team_leader": "销售组长",
						"sales_manger_id": "销售经理id",
						"sales_manger": "销售经理"
					}
				},
				{
					"title": "广告屏平台建立",
					"log_type": "133",
					"log_content": "李工 于 2021-01-12 19:04 完成了项目研发，交付了样机",
					"info": [
							{
								"project_status": "10"
							},
							{
								"project_status": "20"
							}
					],
					"create_time": "2021-01-12 19:04:31",
					"reason": "",
					"fields": {
						"id": "",
						"apply_id": "立项申请ID",
						"project_code": "申请编号",
						"project_cate": "项目分类。1:内部;2:外部",
						"project_type": "项目类型。1:云平台;2:软件;3:硬件;4:PC软件",
						"project_name": "项目名称",
						"project_desc": "项目描述",
						"app_direction": "应用方向",
						"project_status": "项目状态。1:待分配；2：进行中；3：研发完成，待结项；4：已完成",
						"cus_id": "客户id",
						"cus_name": "客户名称",
						"expect_time": "预计结项日期",
						"staff_id": "申请人ID",
						"staff_name": "申请人姓名",
						"deptid": "申请人部门",
						"remark": "备注",
						"potential": "业绩潜力",
						"dev_manage_id": "研发负责人",
						"dev_deptid": "负责部门",
						"overdue_status": "超期状态。1：正常；2：超期（小于7天）；3：严重超期（大于等于7天）",
						"dev_end_time": "研发完成时间",
						"expect_dev_end_time": "期望研发完成日期",
						"check_id": "验收人id",
						"check_name": "验收人",
						"check_time": "验收时间",
						"is_cancel": "是否取消",
						"is_del": "是否删除",
						"create_time": "立项时间",
						"sales_team_leader_id": "销售组长id",
						"sales_team_leader": "销售组长",
						"sales_manger_id": "销售经理id",
						"sales_manger": "销售经理"
					}
				},
				{
					"title": "广告屏平台建立",
					"log_type": "145",
					"log_content": "aaa 于 2021-03-11 09:37 通过了项目变更申请",
					"info": [],
					"create_time": "2021-03-11 09:37:12",
					"reason": "",
					"fields": {
						"id": "",
						"apply_id": "立项申请ID",
						"project_code": "申请编号",
						"project_cate": "项目分类。1:内部;2:外部",
						"project_type": "项目类型。1:云平台;2:软件;3:硬件;4:PC软件",
						"project_name": "项目名称",
						"project_desc": "项目描述",
						"app_direction": "应用方向",
						"project_status": "项目状态。1:待分配；2：进行中；3：研发完成，待结项；4：已完成",
						"cus_id": "客户id",
						"cus_name": "客户名称",
						"expect_time": "预计结项日期",
						"staff_id": "申请人ID",
						"staff_name": "申请人姓名",
						"deptid": "申请人部门",
						"remark": "备注",
						"potential": "业绩潜力",
						"dev_manage_id": "研发负责人",
						"dev_deptid": "负责部门",
						"overdue_status": "超期状态。1：正常；2：超期（小于7天）；3：严重超期（大于等于7天）",
						"dev_end_time": "研发完成时间",
						"expect_dev_end_time": "期望研发完成日期",
						"check_id": "验收人id",
						"check_name": "验收人",
						"check_time": "验收时间",
						"is_cancel": "是否取消",
						"is_del": "是否删除",
						"create_time": "立项时间",
						"sales_team_leader_id": "销售组长id",
						"sales_team_leader": "销售组长",
						"sales_manger_id": "销售经理id",
						"sales_manger": "销售经理"
					}
				},
				{
					"title": "广告屏平台建立",
					"log_type": "160",
					"log_content": "ccc 于 2021-04-12 10:25 修改了项目申请人",
					"info": [
						{
							"staff_name": "苏云龙"
						},
						{
							"staff_name": 0
						}
					],
					"create_time": "2021-04-12 10:25:39",
					"reason": "123",
					"fields": {
						"id": "",
						"apply_id": "立项申请ID",
						"project_code": "申请编号",
						"project_cate": "项目分类。1:内部;2:外部",
						"project_type": "项目类型。1:云平台;2:软件;3:硬件;4:PC软件",
						"project_name": "项目名称",
						"project_desc": "项目描述",
						"app_direction": "应用方向",
						"project_status": "项目状态。1:待分配；2：进行中；3：研发完成，待结项；4：已完成",
						"cus_id": "客户id",
						"cus_name": "客户名称",
						"expect_time": "预计结项日期",
						"staff_id": "申请人ID",
						"staff_name": "申请人姓名",
						"deptid": "申请人部门",
						"remark": "备注",
						"potential": "业绩潜力",
						"dev_manage_id": "研发负责人",
						"dev_deptid": "负责部门",
						"overdue_status": "超期状态。1：正常；2：超期（小于7天）；3：严重超期（大于等于7天）",
						"dev_end_time": "研发完成时间",
						"expect_dev_end_time": "期望研发完成日期",
						"check_id": "验收人id",
						"check_name": "验收人",
						"check_time": "验收时间",
						"is_cancel": "是否取消",
						"is_del": "是否删除",
						"create_time": "立项时间",
						"sales_team_leader_id": "销售组长id",
						"sales_team_leader": "销售组长",
						"sales_manger_id": "销售经理id",
						"sales_manger": "销售经理"
					}
				},
				{
					"title": "广告屏平台建立",
					"log_type": "160",
					"log_content": "ddd 于 2021-04-12 10:28 修改了项目申请人",
					"info": [
						{
							"staff_name": "0"
						},
						{
							"staff_name": "杜伟涛"
						}
					],
					"create_time": "2021-04-12 10:28:03",
					"reason": "123",
					"fields": {
						"id": "",
						"apply_id": "立项申请ID",
						"project_code": "申请编号",
						"project_cate": "项目分类。1:内部;2:外部",
						"project_type": "项目类型。1:云平台;2:软件;3:硬件;4:PC软件",
						"project_name": "项目名称",
						"project_desc": "项目描述",
						"app_direction": "应用方向",
						"project_status": "项目状态。1:待分配；2：进行中；3：研发完成，待结项；4：已完成",
						"cus_id": "客户id",
						"cus_name": "客户名称",
						"expect_time": "预计结项日期",
						"staff_id": "申请人ID",
						"staff_name": "申请人姓名",
						"deptid": "申请人部门",
						"remark": "备注",
						"potential": "业绩潜力",
						"dev_manage_id": "研发负责人",
						"dev_deptid": "负责部门",
						"overdue_status": "超期状态。1：正常；2：超期（小于7天）；3：严重超期（大于等于7天）",
						"dev_end_time": "研发完成时间",
						"expect_dev_end_time": "期望研发完成日期",
						"check_id": "验收人id",
						"check_name": "验收人",
						"check_time": "验收时间",
						"is_cancel": "是否取消",
						"is_del": "是否删除",
						"create_time": "立项时间",
						"sales_team_leader_id": "销售组长id",
						"sales_team_leader": "销售组长",
						"sales_manger_id": "销售经理id",
						"sales_manger": "销售经理"
					}
				}
			],
			messages: [
				{
					user: '李工',
					date: '2021-06-20',
					title: '题西林壁',
					content: '横看成岭侧成峰，远近高低各不同。不识庐山真面目，只缘身在此山中。横看成岭侧成峰，远近高低各不同。不识庐山真面目，只缘身在此山中。横看成岭侧成峰，远近高低各不同。不识庐山真面目，只缘身在此山中。',
					discuss: [
						{
							user: '刘工',
							date: '2021-06-20',
							content: '好诗好诗！！！',
						},
						{
							user: '王工',
							date: '2021-06-21',
							content: 'very good',
						},
						{
							user: '陈工',
							date: '2021-06-22',
							content: '很好！',
						},
					]
				}
			],
		};
	},
	components: {messageContent},
	created() {},
	mounted() {},
	methods: {
		ShowAddComment(idx) {
			this.IfShowEdit = true
			this.index = idx
		},
		AddComment() {
			if (this.comment) {
				this.comments[this.index].discuss.push({
					user: this.$store.store.user.real_name,
					date: `${new Date().getFullYear()}-${(new Date().getMonth() +1)}-${new Date().getDate()}`,
					content: this.comment
				})
				this.comment = ''
				this.IfShowEdit = false
			}
		},
		ShowMessage(type, idx=0) {
			this.IfShowMes = true
			this.$nextTick(() => {
				this.$refs.messageContent.SubEvents(type, this.messages[idx]);
			});
		},
		Getconfirm() {
			this.IfShowMes = false;
		},
		Getcancel() {
			this.IfShowMes = false;
		},
	}
};
</script>
<style lang="scss" scoped>
	.comment {
		width: 100%;
		height: 520px;
		background-color: #f1f1f1;
		padding: 10px;
		position: relative;
		.com {
			height: 90%;
			overflow-y: auto;
		}
		.content {
			margin-top: 20px;
			.cont {
				position: relative;
				span {
					margin-left: 50px;
				}
				.remark {
					position: absolute;
					right: 5px;
					bottom: 5px;
				}
			}
			.discuss {
				width: 80%;
				margin: 0 auto;
				text-align: right;
				border-bottom: 1px solid #999;
				span {
					margin-right: 50px;
				}
			}
		}
		.write {
			position: absolute;
			bottom: 10px;
			width: 100%;
			.el-input {
				width: 70%;
			}
			.remark {
				margin-left: 15px;
			}
		}
	}
	.message {
		div {
			span {
				text-decoration: underline;
				cursor: pointer;
			}
		}
	}
</style>
